<template>
  <el-card style="margin: 30px 0px">
    <el-form ref="form" label-width="80px">
      <el-form-item label="SPU名称" size="normal">{{
        spu.spuName
      }}</el-form-item>
      <el-form-item label="SKU名称" size="normal">
        <el-input
          placeholder="SKU名称"
          size="normal"
          v-model="skuForm.skuName"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格(元)" size="normal">
        <el-input
          type="number"
          size="normal"
          placeholder="元"
          v-model="skuForm.price"
        ></el-input>
      </el-form-item>
      <el-form-item label="重量(KG)" size="normal">
        <el-input
          type="number"
          size="normal"
          placeholder="KG"
          v-model="skuForm.weight"
        ></el-input>
      </el-form-item>
      <el-form-item label="规格描述" size="normal">
        <el-input
          type="textarea"
          size="normal"
          placeholder="规格描述"
          v-model="skuForm.skuDesc"
        ></el-input>
      </el-form-item>

     

      <el-form-item label="平台属性">
        <el-form ref="form" label-width="80px" inline>
          <el-form-item :label="attr.attrName" :key="attr.id" v-for="(attr,index) in attrList">
            <el-select v-model="attr.attrIdAndValueId" placeholder="选择" >
              <el-option :label="itemValue.valueName" :value="attr.id+':'+itemValue.id" :key="itemValue.id" v-for="itemValue in attr.attrValueList"></el-option>
            </el-select>
          </el-form-item>
         
        </el-form>
      </el-form-item>

            <el-form-item label="销售属性" size="normal">
        <el-form ref="form" :inline="true" size="normal">
          <el-form-item
            :label="saleAttr.saleAttrName"
            size="normal"
            v-for="(saleAttr, index) in saleAttrList"
            :key="saleAttr.id"
          >
            <el-select
              placeholder="请选择"
              v-model="saleAttr.saleAttrIdAndValueId"
            >
              <el-option
                :label="saleAttrValue.saleAttrValueName"
                :value="`${saleAttr.id}:${saleAttrValue.id}`"
                v-for="(saleAttrValue, index) in saleAttr.spuSaleAttrValueList"
                :key="saleAttrValue.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <el-table border :data="imgList" style="width: 100%">
          <el-table-column width="80" type="selection"> </el-table-column>

          <el-table-column label="图片" with>
            <template slot-scope="{row}">
             <img :src="row.imgUrl" alt="" width="100"/>
            </template>
             </el-table-column>
          <el-table-column prop="imgName" label="名称" with> </el-table-column>
          <el-table-column label="操作" with>
            
            <template slot-scope="{row}">
              <el-button type="primary" v-if="row.isDefault==0" @click="changeDefault(row)">设为默认</el-button>
              <el-button type="primary" v-else>默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "AddSku",
  data() {
    return {
      city:'',
      //接受父组件传递过来的SPU
      spu: {},
      //平台属性
      attrList: [],
      //销售属性
      saleAttrList: [],
      //照片墙
      imgList: [],
      //准备收集SKU的参数,参数不能瞎写、胡写、乱写、按照文档的格式收集数据即可！！！
      skuForm: {
        //实质是父组件传递过来的
        category3Id: "",
        spuId: "",
        tmId: 0,

        //下面四个参数v-model搞定！！！
        skuName: "", //添加实例的名字
        price: "", //添加实例的价格
        weight: "", //添加实例的重量
        skuDesc: "", //规格描述

        skuDefaultImg: "", //默认图片的参数
        skuAttrValueList: [
          // //平台属性的收集
          // {
          //   attrId: "", //平台属性的ID
          //   valueId: "", //平台属性值的ID
          // },
        ],
        skuSaleAttrValueList: [
          //销售属性的收集数据
          // {
          //   saleAttrId: 0, //销售属性的ID
          //   saleAttrValueId: 0, //销售属性值的ID
          // },
        ],
      },
    }
  },
  methods: {
        //添加SKU
    async save() {
      //整理参数
      //平台属性
      this.skuForm.skuAttrValueList = this.attrList.reduce((a, b) => {
        if (b.attrIdAndValueId) {
          const [attrId, valueId] = b.attrIdAndValueId.split(":");
          a.push({ attrId, valueId });
        }
        return a;
      }, []);
      //销售属性
      this.skuForm.skuSaleAttrValueList = this.saleAttrList.reduce((a, b) => {
        if (b.saleAttrIdAndValueId) {
          const [saleAttrId, saleAttrValueId] =
            b.saleAttrIdAndValueId.split(":");
          a.push({ saleAttrId, saleAttrValueId });
        }
        return a;
      }, []);
      //发请求[添加SKU]

      try {
        await this.$http.spu.reqAddSku(this.skuForm);
        this.$message({ type: "success", message: "添加SKU成功" });
        //切换场景
        this.$emit("changeScene");
        //清空数据
        Object.assign(this._data, this.$options.data());
      } catch (error) {}
    },
    changeDefault(row){
      this.imgList.forEach(item=>{
        item.isDefault=0
      })
      row.isDefault = 1
      //收集默认图片地址
      this.skuForm.skuDefaultImg = row.imgUrl;
    },
    cancel(){
      this.$emit('changeScene')
      Object.assign(this._data,this.$options.data())
    },
    async init(c1, c2, spu) {
      //收集添加SKU的数据
      this.skuForm.category3Id = spu.category3Id;
      this.skuForm.spuId = spu.id;
      this.skuForm.tmId = spu.tmId;
      //发请求:获取初始化的数据[平台属性、销售属性、图片列表]
      this.spu = spu;
      //平台是属性
      let p1 = this.$http.spu.reqAttrList(c1, c2, spu.category3Id);
      //销售属性
      let p2 = this.$http.spu.reqSaleAttrList(spu.id);
      //照片墙的数据
      let p3 = this.$http.spu.reqSpuImgList(spu.id);
      //哪怕入职：干活了.数据有了在干活！！
      let result = await Promise.all([p1, p2, p3]);
      this.attrList = result[0].data;
      this.saleAttrList = result[1].data;
      this.imgList = result[2].data.map((item) => {
        return {
          ...item,
          //图片列表:排他套路，但是数据格式完不成！！！动态追加字段！！！
          //1默认图片  0非默认图片
          isDefault: 0,
        };
      });
    },
  },
};
</script>

<style>
</style>